<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE Template</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <form @submit.prevent="demo">
            <label for="demo">账号：</label>
            <input type="text" id="demo" v-model.trim="userInfo.account"><br><br>
            
            密码：<input type="password" id="demo" v-model="userInfo.password"><br><br>
            年龄：<input type="number" v-model.number="userInfo.age"><br><br>
            性别：
            男<input type="radio" name="sex" value="male" v-model="userInfo.sex">
            女<input type="radio" name="sex" value="female" v-model="userInfo.sex"><br><br>
            爱好：
            篮球<input type="checkbox" value="lanqiu" v-model="userInfo.hobby">
            排球<input type="checkbox" value="paiqiu" v-model="userInfo.hobby">
            羽毛球<input type="checkbox" value="yumaoqiu" v-model="userInfo.hobby"><br><br>
            所属校区：
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="上海">上海</option>
                <option value="武汉">武汉</option>
                <option value="南京">南京</option>
            </select><br><br>
            其他信息：
            <textarea v-model.lazy="userInfo.other"></textarea><br><br>
            <input type="checkbox" v-model="userInfo.checked"> 阅读并接受<a href="https://www.baidu.com">《用户协议》</a>
            <br><br>
            <button>提交</button>
        </form>
    </div>
</body>
    <script type="text/javascript">
        
        const vm = new Vue({
            el:'#root',
            data(){
                return{
                    userInfo:{
                    account:'',
                    password:'',
                    age:'', 
                    sex:'',
                    hobby:[],
                    city:'南京',
                    other:'',
                    checked:''
                }
                }
            },
            methods:{
              demo(event){
                  console.log(JSON.stringify(this.ue))

              }
          }
        })
    </script>
</html>